<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择图片或文件</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>
<body>

<video id="video" width="640" height="480" autoplay></video>
<script>
    const videoElement = document.getElementById('video');

    // 检查浏览器是否支持getUserMedia API
    if (navigator.mediaDevices.getUserMedia) {
        // 设置媒体类型和尺寸
        const constraints = {
            video: {
                width: 640,
                height: 480
            }
        };

        // 获取用户摄像头数据
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function(stream) {
                // 将视频流绑定到video元素上
                videoElement.srcObject = stream;
            })
            .catch(function(err) {
                console.error("出错了：" + err);
            });
    } else {
        alert('不幸的是，你的浏览器不支持getUserMedia');
    }
</script>
</body>
</html>

